<template>
  <el-dialog
    v-model="visible"
    :title="!isShowProd ? '选择商品' : '查看商品'"
    :close-on-click-modal="false"
  >
    <el-table
      ref="prodTableRef"
      v-loading="dataListLoading"
      :data="dataList"
      border
      style="width: 100%;"
    >
      <el-table-column
        width="50"
        header-align="center"
        align="center"
      >
        <template #default="scope">
          <div>
            <el-radio
              v-model="prodId"
              :label="scope.row.prodId"
              @change="getSelectProdRow(scope.$index,scope.row)"
            >
              &nbsp;
            </el-radio>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        prop="prodName"
        header-align="center"
        align="center"
        label="产品名称"
      />
      <el-table-column
        align="center"
        width="140"
        label="产品图片"
      >
        <template #default="scope">
          <ImgShow
            :src="scope.row.pic"
            :img-style="{width:'100px',height:'100px'}"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
    <template #footer>
      <div>
        <el-button
          :disabled="dataListSelections.length <= 0"
          @click="selectProd(dataListSelections.length <= 0)"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const emit = defineEmits(['refreshDiscountProds'])

const isShowProd = ref(0)
const dataListSelections = ref([])
const dataListLoading = ref(false)
const discountProds = ref([])
const discountId = ref(0)
const visible = ref(false)
/**
 * 获取数据列表
 * @param id
 * @param discountProds
 */
const init = (id, discountProds) => {
  discountProds.value = discountProds
  discountId.value = id
  visible.value = true
  dataListLoading.value = true
  if (discountProds) {
    discountProds.value.forEach(row => {
      dataListSelections.value.push(row)
    })
  }
  getDataList()
}
defineExpose({ init })

const prodId = ref(0)
const dataList = ref([])
const prodTableRef = ref(null)
const totalPage = ref(0)
const getDataList = () => {
  http({
    url: http.adornUrl('/platform/search/prod/page'),
    method: 'get',
    params: http.adornParams({
      current: pageIndex,
      size: pageSize,
      status: 1
    })
  })
    .then(({ data }) => {
      dataList.value = data.records
      totalPage.value = data.total
      dataListLoading.value = false
      nextTick(() => {
        if (discountProds.value) {
          discountProds.value?.forEach(row => {
            const index = dataList.value?.findIndex(
              prodItem => prodItem.prodId === row.prodId
            )
            prodTableRef.value?.toggleRowSelection(dataList.value[index])
          })
        }
      })
    })
}

const pageIndex = ref(1)
const pageSize = ref(10)
/**
 * 每页数
 * @param val
 */
const sizeChangeHandle = (val) => {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}

/**
 * 当前页
 * @param val
 */
const currentChangeHandle = (val) => {
  pageIndex.value = val
  getDataList()
}

/**
 * 选择产品
 * @param state
 */
const selectProd = (state) => {
  if (!state) {
    return
  }
  const prods = []
  dataListSelections.value?.forEach(item => {
    const prodIndex = prods.findIndex(prod => prod.prodId === item.prodId)
    if (prodIndex === -1) {
      prods.push({
        discountProdId: 0,
        prodId: item.prodId,
        prodName: item.prodName,
        pic: item.pic
      })
    }
  })
  emit('refreshDiscountProds', prods)
  dataListSelections.value = []
  visible.value = false
}

/**
 * 获取当选的行
 * @param index
 * @param row
 */
// eslint-disable-next-line no-unused-vars
const getSelectProdRow = (index, row) => {
  dataListSelections.value = []
  dataListSelections.push(row)
}
</script>
